<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../vue.js"></script>
</head>
<body>
	<div id="app">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>
	</div>

	<div id="app2">
		<counter ref="one" @change="change"></counter>
		<counter ref="two" @change="change"></counter>
		<div>{{total}}</div>
	</div>

	<script>
		Vue.component('row', {
			data: function () {
				return {
					content: '我是一行'
				}
			},
			template: '<tr><td>{{content}}</td></tr>'
		});

		var vm = new Vue({
			el: '#app'
		});

		Vue.component('counter', {
			template: '<div @click="handleClick">{{number}}</div>',
			data: function () {
				return {
					number: 0
				}
			},
			methods: {
				handleClick: function () {
					this.number++;
					this.$emit('change');
				}
			}
		});
		var vm2 = new Vue({
			el: '#app2',
			data: {
				total: 0
			},
			methods: {
				change: function () {
					this.total = this.$refs.one.number + this.$refs.two.number;
				}
			}
		});
	</script>
</body>
</html>